<template>
  <div v-if="!showMobilePage">
    <template v-if="isRecheck && !isReport">
      <el-button
        v-if="item.reviewState === REVIEW_STATE.PENDING && hasRouteAuth('crm:finance:financeRecheck') && item.settlementStatus !== SETTLEMENT_STATUS.COMPLETED"
        type="text"
        class="sealing-pass"
        @click="toPass(item)"
      ><span class="sealing-font">通过</span></el-button>
      <el-button
        v-if="item.reviewState === REVIEW_STATE.PENDING && hasRouteAuth('crm:finance:financeRecheck') && item.settlementStatus !== SETTLEMENT_STATUS.COMPLETED"
        type="text"
        class="sealing-fail"
        @click="toFail(item)"
      ><span class="sealing-font">拒绝</span></el-button>
      <span
        v-if="item.reviewState === REVIEW_STATE.PASS || item.reviewState === REVIEW_STATE.REFUSE"
        :class="item.reviewState === REVIEW_STATE.PASS ? 'sealing-font pass-color' : 'sealing-font fail-color'"
      >{{ item.reviewState | setSealReviewState }}</span>
      <el-button
        v-if="item.reviewState === REVIEW_STATE.PASS"
        :disabled="item.reviewState === REVIEW_STATE.PENDING || !hasRouteAuth('crm:finance:financeRecheck')"
        class="backout"
        type="text"
        @click="toBackOut(item)"
      ><span class="sealing-font">作废审批</span></el-button>
    </template>
    <el-button type="text" style="margin-left:0;" @click="toCheck(item)">
      <div class="sealing-check">
        <span class="sealing-font">记录</span>
      </div>
    </el-button>
  </div>
  <tableOperateBtn v-else>
    <template v-if="isRecheck && !isReport">
      <el-dropdown-item v-if="item.reviewState === REVIEW_STATE.PENDING && hasRouteAuth('crm:finance:financeRecheck') && item.settlementStatus !== SETTLEMENT_STATUS.COMPLETED" @click.native="toPass(item)">
        <div style="font-size: 14px">通过</div>
      </el-dropdown-item>
      <el-dropdown-item v-if="item.reviewState === REVIEW_STATE.PENDING && hasRouteAuth('crm:finance:financeRecheck') && item.settlementStatus !== SETTLEMENT_STATUS.COMPLETED" @click.native="toFail(item)">
        <div style="font-size: 14px">拒绝</div>
      </el-dropdown-item>
      <el-dropdown-item v-if="item.reviewState === REVIEW_STATE.PASS" :disabled="item.reviewState === REVIEW_STATE.PENDING || !hasRouteAuth('crm:finance:financeRecheck')" @click.native="toBackOut(item)">
        <div style="font-size: 14px">作废审批</div>
      </el-dropdown-item>
    </template>
    <el-dropdown-item @click.native="toCheck(item)">
      <div style="font-size: 14px">记录</div>
    </el-dropdown-item>
    <el-dropdown-item v-if="hasEdit" :disabled="editDisabled" @click.native="costEdit">
      <div style="font-size: 14px">编辑</div>
    </el-dropdown-item>
  </tableOperateBtn>
</template>

<script>
import { hasRouteAuth } from '@/utils/permission';
import { setSealReviewState } from '@/filters/status';
import orderDetail from '@/assets/order-detail.png';
// api
import { allReviewFail, allReviewPass, sealBillBackout } from '@/api/sealingAccount';
import mobileTable from '@/mixins/mobileTable';
import { REVIEW_STATE } from '@/utils/const/sealing';
import { SETTLEMENT_STATUS } from '@/utils/const/cost';

export default {
  filters: { setSealReviewState },
  mixins: [mobileTable],
  props: {
    item: {
      default: () => {
        return {};
      },
      type: Object
    },
    columnType: { // 表格类型：order: 订单  pipeline: 流水列表 record: 核销记录
      type: String,
      default: 'order'
    },
    // true：复审，false：初审
    isRecheck: {
      type: Boolean,
      default: false
    },
    isReport: {
      type: Boolean,
      default: false
    },
    sealingId: {
      type: String | Number,
      default: ''
    },
    hasEdit: {
      type: Boolean,
      default: false
    },
    editDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      orderDetail,
      REVIEW_STATE,
      SETTLEMENT_STATUS
    };
  },
  computed: {
    msgType() {
      switch (this.columnType) {
        case 'order':
          return '订单';
        case 'pipeline':
          return '流水';
        case 'record':
          return '核销记录';
        case 'cost':
          return '成本';
        default:
          return '订单';
      }
    }
  },
  methods: {
    hasRouteAuth,
    costEdit() {
      this.$emit('costEdit');
    },
    toPass(item) {
      const params = this.getParams(item);
      allReviewPass(params).then((res) => {
        if (res.code === 200) {
          item.reviewState = this.REVIEW_STATE.PASS;
          this.$emit('freshData');
        } else {
          this.$message.error(res.message);
        }
      });
    },
    toFail(item) {
      this.$prompt(`请确认是否拒绝该${this.msgType}审批`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel prompt',
        center: true,
        type: 'warning',
        inputPlaceholder: '请输入审批未通过的原因',
        inputValidator: value => {
          if (value) {
            if (value.length > 50) {
              return '输入字符不得超过50个字';
            }
          } else {
            return '输入内容不得为空';
          }
        },
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            if (instance.inputValue.replace(/\s+/g, '')) {
              done();
            } else {
              this.$message({
                type: 'warning',
                message: '输入内容不能为空'
              });
            }
          } else {
            done();
          }
        }
      }).then(({ value }) => {
        const remark = value.replace(/\s+/g, '');
        const params = this.getParams(item);
        params.remark = remark;
        allReviewFail(params).then(res => {
          if (res.code === 200) {
            item.reviewState = REVIEW_STATE.REFUSE;
            this.$emit('freshData');
          } else {
            this.$message.error(res.message);
          }
        });
      }).catch(() => {
        return false;
      });
    },
    toBackOut(item) {
      const msg = this.msgType === '成本' ? '请确认是否作废审批<br />(当成本结算状态=已完成，成本退回待初审，审批状态不变)' : '请确认是否作废审批';
      this.$confirm(msg, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel',
        center: true,
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        const params = this.getParams(item);
        sealBillBackout(params).then((res) => {
          if (res.code === 200) {
            item.reviewState = REVIEW_STATE.PENDING;
            this.$emit('freshData');
          } else {
            this.$message.error(res.message);
          }
        },
        result => {
          // this.$message.error(result.message);
        }
        );
      });
    },
    toCheck(item) {
      const params = this.getParams(item);
      const url = this.$router.resolve({
        name: 'sealingAccountDetail',
        params: { sealingAccountId: item.id },
        query: { type: params.type }
      });
      window.open(url.href, '_blank');
    },
    getParams(item) {
      const params = {
        id: this.sealingId,
        type: 0
      };
      switch (this.columnType) {
        case 'order':
          params.orderIds = [item.id];
          params.type = 0;
          break;
        case 'pipeline':
          params.flowIds = [item.id];
          params.type = 1;
          break;
        case 'record':
          params.recordIds = [item.id];
          params.type = 2;
          break;
        case 'cost':
          params.costIds = [item.id];
          params.type = 3;
          break;
        default:
          params.orderIds = [item.id];
          break;
      }
      return params;
    }
  }
};
</script>

<style lang='scss' scoped>
.review-state {
  width: 88px;
  height: 26px;
  border-radius: 16px;
  text-align: center;
  line-height: 26px;
  margin: 0 auto;
  .icon-class {
    width: 16px;
    height: 16px;
  }
}
.sealing-check {
  display: flex;
  align-items: center;
}
.sealing-font {
  font-size: 14px;
}
.sealing-pass {
  width: 48px;
  height: 26px;
  line-height: 2px;
  background: #406EFF;
  font-size: 14px;
  border-radius: 16px;
  color: #fff;
}
.sealing-fail {
  width: 48px;
  height: 26px;
  font-size: 14px;
  margin-left: 0;
  line-height: 2px;
  background: #EFF3FB;
  border-radius: 13px;
  color: #406EFF;
}
.pass-color {
  color: #31CC9C;
}
.fail-color {
  color: #E02020;
}
</style>
